<template>
    <hb-title>
        <span v-for="(v, i) in list" :key="i" @click="e_page_">
            <i v-if="i !== 0" class="gt">&gt;</i>
            <em class="items cur" :class="{big: i === 0}" v-text="v.txt" :data-path="v.path" :data-i="i" />
        </span>
    </hb-title>
</template>

<script>
export default {
	props: {
		list: {
			default: null,
		},
		pathType: {
			default: 'child',
		},
	},
	data() {
		return {}
	},
	created() {},
	methods: {
		e_page_(event) {
			let t = event.target
			let d = t.dataset.path
			let len = t.dataset.i
			if (d === undefined || d === '') {
				return false
			}

			let path = ''
			if (this.pathType === 'child') {
				for (let i = 0; i <= len; i++) {
					path += '/' + this.list[i].path
				}
			} else {
				if (d[0] !== '/') {
					d = '/' + d
				}
				path = d
			}
			this.$router.push(path)
		},
	},
}
</script>

<style scoped>
.items {
	font-style: normal;
}
.items:hover {
	color: var(--clr1);
}
.big {
	font-size: 20px;
}
.gt {
	padding: 0 20px;
}
span:nth-child(1) {
	color: var(--clr1);
}
</style>